<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body style="text-align: center;">
    <div id="app">
        {{msg}}
        <p>Using mustaches: {{ rawHtml }}</p>
        <p v-html="rawHtml"></p>
        <div v-bind:class="color">test...</div>
        <p>计算：{{ number + 1 }}</p>
        <p>三元运算： {{ ok == 1 ? 'YES' : 'NO' }}</p>
        <p>字符反转： {{ message.split('').reverse().join('') }}</p>
        <p></p>
        <div v-bind:id="dynamicId">
            <h5 style="color: black;">绑定id值 更改id值</h5>
            你好啊 时间
        </div>
        <div>
            <p>v-bind 特殊属性 如果
                <br> isButtonDisabled 的值是 null、undefined 或 false，<br> 则 disabled attribute 甚至不会被包含在渲染出来的 button 元素中。</p>
            <button v-bind:disabled="isButtonDisabled">Button</button>
        </div>
        <p v-if="seen" v-bind:class='color'> Now You can look me</p>
        <a v-bind:href="url">Click Me</a>
        <a v-on:click="doSomething"> {{click}}</a>
        <!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
        <a v-bind:[attributeName]="url"> 动态参数 </a>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hi Love",
                rawHtml: '<span style="color:red">this is should be red</span>',
                color: 'blue',
                number: 10,
                ok: 1,
                message: "vue",
                dynamicId: "idsty",
                isButtonDisabled: "false",
                seen: true,
                attributeName: "href",
                click: "Please Cilck Me!",
                url: "https://gitee.com/yichangkong/vue-learn/tree/master/vue.js_tutorials"
            },
            methods: {
                doSomething: function() {
                    this.click = 'Clicked!';
                }

            }
        });
        vm.msg = "hi....Vue bro";
    </script>
    <style type="text/css">
        .red {
            color: red;
        }
        
        .blue {
            color: blue;
            font-size: 100px;
        }
        
        #idsty {
            color: red;
            font-size: 20px;
        }
    </style>
</body>

</html>